<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="alternate icon" href="/images/favicon.ico" type="image/x-icon">
    <title>远程监护</title>
    <style>
        body {
            background-color: #121212; /* 暗色背景 */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0;
            color: #ffffff; /* 白色文字，以便在暗色背景上可见 */
        }
        .image-container {
            position: relative; /* 使子元素（图标）可以相对于容器定位 */
            margin: 20px 0;
        }
        img {
            max-width: 100%;
            height: auto;
            cursor: pointer; /* 鼠标指针变为手形，提示可点击（仅针对图像本身，图标会有自己的样式） */
        }
        .fullscreen-icon {
            position: absolute;
            bottom: 10px;
            right: 10px;
            width: 30px;
            height: 30px;
            background-image: url('images/fullscreenicon.png');
            background-size: cover;
            cursor: pointer; /* 鼠标指针变为手形，提示可点击 */
            z-index: -1; /* 确保图标在图像之上 */
        }
        .fullscreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain; /* 保持图像宽高比，同时填充全屏 */
            z-index: 1000; /* 确保图像在其他元素之上 */
            background-color: #000; /* 全屏时背景色为黑色 */
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img id="cameraImage" alt="摄像头图像">
        <div class="fullscreen-icon" onclick="toggleFullscreen('cameraImage')"></div>
    </div>
    <div class="image-container">
        <img id="lcdImage" alt="显示屏图像">
        <div class="fullscreen-icon" onclick="toggleFullscreen('lcdImage')"></div>
    </div>

    <script>
        var hostname = window.location.hostname;
        var cameraImage = document.getElementById('cameraImage');
        var lcdImage = document.getElementById('lcdImage');
        var isFullscreen = false;
        var currentFullscreenImage = null;

        cameraImage.src = 'http://' + hostname + ':8080/?action=stream';
        lcdImage.src = 'http://' + hostname + ':8001';

        function toggleFullscreen(imgId) {
            var img = document.getElementById(imgId);
            if (isFullscreen && currentFullscreenImage === img) {
                // 退出全屏
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) { // Firefox
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) { // IE/Edge
                    document.msExitFullscreen();
                }
                img.classList.remove('fullscreen');
                currentFullscreenImage = null;
            } else {
                // 进入全屏
                currentFullscreenImage = img;
                img.classList.add('fullscreen');
                if (img.requestFullscreen) {
                    img.requestFullscreen();
                } else if (img.mozRequestFullScreen) { // Firefox
                    img.mozRequestFullScreen();
                } else if (img.webkitRequestFullscreen) { // Chrome, Safari and Opera
                    img.webkitRequestFullscreen();
                } else if (img.msRequestFullscreen) { // IE/Edge
                    img.msRequestFullscreen();
                }
            }
            isFullscreen = currentFullscreenImage === img;
        }

        document.addEventListener('dblclick', function(event) {
            if (event.target.tagName === 'IMG') {
                toggleFullscreen(event.target.id);
            }
        });

        document.addEventListener('fullscreenchange', function() {
            if (!document.fullscreenElement) {
                // 当退出全屏时，如果当前有全屏图像，则移除其全屏样式
                if (currentFullscreenImage) {
                    currentFullscreenImage.classList.remove('fullscreen');
                    currentFullscreenImage = null;
                }
                isFullscreen = false;
            }
        });

        // 监听Esc键退出全屏（对于不支持fullscreenchange事件或需要额外处理的场景）
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape' && isFullscreen) {
                toggleFullscreen(currentFullscreenImage.id); // 实际上会调用退出全屏的逻辑
            }
        });

        // 监听投屏单击事件
        document.getElementById('lcdImage').addEventListener('click', function() {
            var img = event.target;
            
            // 获取图片在网页上的显示尺寸
            var screenWidth = img.offsetWidth;
            var screenHeight = img.offsetHeight;

	    const screenAspect = screenWidth / screenHeight;
	    const imageAspect = img.naturalWidth / img.naturalHeight;

	    let displayWidth, displayHeight;
	    let x_offset = 0;
	    let y_offset = 0;
	    if (screenAspect > imageAspect) {
	    	// 屏幕更宽，图片高度等于屏幕高度，宽度按比例缩放
	    	displayHeight = screenHeight;
	    	displayWidth = img.naturalWidth * (screenHeight / img.naturalHeight);
		x_offset = (screenWidth - displayWidth) / 2;
	    } else {
		// 屏幕更高，图片宽度等于屏幕宽度，高度按比例缩放
		displayWidth = screenWidth;
		displayHeight = img.naturalHeight * (screenWidth / img.naturalWidth);
		y_offset = (screenHeight - displayHeight) / 2;
	    }
            
            // 计算缩放比例
            var scaleX = img.naturalWidth / displayWidth;
            var scaleY = img.naturalHeight / displayHeight;
            
            // 获取点击位置在图片上的相对坐标
            var offsetX = event.offsetX - x_offset;
            var offsetY = event.offsetY - y_offset;
            
            // 计算点击位置在图片原始大小上的绝对像素坐标
            var absoluteX = Math.round(offsetX * scaleX);
            var absoluteY = Math.round(offsetY * scaleY);
            
            // 计算点击位置在图片上的百分比
            var percentX = ((offsetX / displayWidth) * 100).toFixed(2);
            var percentY = ((offsetY / displayHeight) * 100).toFixed(2);
            
            // console.log('Mouse clicked at (absolute): (' + absoluteX + ', ' + absoluteY + ')');
            // console.log('Mouse clicked at (percent): (' + percentX + '%, ' + percentY + '%)');

            var pointInfo = {};
            pointInfo["abs_x"] = absoluteX;
            pointInfo["abs_y"] = absoluteY;
            pointInfo["percent_x"] = percentX;
            pointInfo["percent_y"] = percentY;

            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/cgi-bin/remote_screen_clicked.sh', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.send(JSON.stringify(pointInfo, null, 4));
        });

    </script>
</body>
</html>
